import { Search, Swiper, Toast, } from 'react-vant';
import { useEffect, useState } from 'react';
import '../sass/Home.scss'
import axios from 'axios';

function Home() {

	let [value, setValue] = useState('');
	let [banner, setBanner] = useState([{ "bannerImg": "http://www.kangliuyong.com:10002/images/product_large/IMG_0389_02.jpg", "name": "卡布奇诺瑞纳冰", "pid": "rena_ice003" }, { "bannerImg": "http://www.kangliuyong.com:10002/images/product_large/IMG_0388_02.jpg", "name": "抹茶瑞纳冰", "pid": "rena_ice002" }, { "bannerImg": "http://www.kangliuyong.com:10002/images/product_large/IMG_0380_02.jpg", "name": "标准美式", "pid": "coffee001" }, { "bannerImg": "http://www.kangliuyong.com:10002/images/product_large/IMG_0382_02.jpg", "name": "摩卡", "pid": "coffee003" }].reverse());

	//获取轮播图数据
	let getBanner = () => {
		axios({
			method: 'get',
			url: '/banner',
		}).then(res => {
			if (res.data.code == 300) {
				setBanner(res.data.result.reverse())
			} else {
				Toast('网络出错啦~')
			}
		})
	}

	let searchHandel = () => {
		console.log(value);
	}

	useEffect(() => {
		getBanner()
	}, [])

	return (
		<div className="home">
			<div className="top-tip-wrap">
				<div className="top-tip-left">
					<div className="top-tip">下午好</div>
					<div className="top-login">登录</div>
				</div>
				<div className="top-tip-right">
					<Search shape="round" value={value} onChange={setValue} placeholder="请输入搜索关键词" onSearch={() => { searchHandel() }} onClear={() => setValue('')} />
				</div>
			</div>
			<div className="swiper-wrap">
				<Swiper autoplay={3000}>
					{
						banner.map((item) => {
							return (
								<Swiper.Item key={item.pid}>
									<div className="swiper-list">
										<img className='auto-img' lazyload='true' src={item.bannerImg} alt='' />
									</div>
								</Swiper.Item>
							)
						})
					}
				</Swiper>
			</div>
			<div className="content-wrap">
				<div className="content-list">
					<div className="img"></div>
					<div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
					<div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
					<div className="price-wrap">
						<div className="price">¥28.00</div>
					</div>
				</div>
				<div className="content-list">
					<div className="img"></div>
					<div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
					<div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
					<div className="price-wrap">
						<div className="price">¥28.00</div>
					</div>
				</div>
				<div className="content-list">
					<div className="img"></div>
					<div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
					<div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
					<div className="price-wrap">
						<div className="price">¥28.00</div>
					</div>
				</div>
				<div className="content-list">
					<div className="img"></div>
					<div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
					<div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
					<div className="price-wrap">
						<div className="price">¥28.00</div>
					</div>
				</div>
				<div className="content-list">
					<div className="img"></div>
					<div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
					<div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
					<div className="price-wrap">
						<div className="price">¥28.00</div>
					</div>
				</div>
			</div>
		</div>
	)
}

export default Home